<template>
  <div class="hot-search-container">
    <el-card>
      <div slot="header">
        <div class="header">
          <span>线上热门搜索</span><i class="el-icon-more" />
        </div>
      </div>
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="left">
            <div class="top">
              <span>搜索用户数</span>&nbsp;
              <i class="el-icon-info" />
            </div>
            <div class="desc">
              <span class="number">12321</span>
              <span class="small-number"
                >17.1&nbsp;<svg width="8px" height="8px">
                  <polygon
                    points="0,6, 8,6, 4,0"
                    style="fill: #ec5c97; stroke: #ec5c97; stroke-width: 1"
                  /></svg
              ></span>
              <!-- <span
            style="margin-left: 5%"
          >日同比&nbsp;19,16% &nbsp;<svg width="8px" height="8px">
            <polygon
              points="0,0 8,0 4,6"
              style="fill: #25cc41; stroke: #25cc41; stroke-width: 1"
            /></svg></span> -->
            </div>
            <div ref="searchChart1" class="chart" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="left">
            <div class="top">
              <span>人均搜索次数</span>&nbsp;
              <i class="el-icon-info" />
            </div>
            <div class="desc">
              <span class="number">2.7</span>
              <span class="small-number"
                >26.2&nbsp;<svg width="8px" height="8px">
                  <polygon
                    points="0,0 8,0 4,6"
                    style="fill: #25cc41; stroke: #25cc41; stroke-width: 1"
                  /></svg
              ></span>
            </div>
            <div ref="searchChart2" class="chart" />
          </div>
        </el-col>
      </el-row>
      <div class="footer">
        <el-table style="width: 100%" border>
          <el-table-column label="排名" type="index" width="80" />
          <el-table-column label="搜索关键字" />
          <el-table-column label="用户数" sortable />
          <el-table-column label="周涨幅" sortable />
        </el-table>
      </div>
      <el-pagination
        :disabled="ispaginationDisable"
        class="dashboard-pagination"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
      />
    </el-card>
  </div>
</template>

<script>
import pagination from '@/mixin/pagenation'
export default {
  name: 'HotSearch',
  components: {},
  mixins: [pagination],
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.initSearchChart1()
    this.initSearchChart2()
  },
  methods: {
    initSearchChart1 () {
      const chart = this.$echarts.init(this.$refs.searchChart1)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: '10%'
        },
        series: [
          {
            data: [100, 50, 200, 100, 200, 90, 170, 250, 300],
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              color: '#86acee'
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#86acee' },
                { offset: 1, color: '#ffffff' }
              ])
            }
          }
        ]
      }
      chart.setOption(option)
    },
    initSearchChart2 () {
      const chart = this.$echarts.init(this.$refs.searchChart2)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: '10%'
        },
        series: [
          {
            data: [200, 100, 300, 200, 300, 200, 300, 200, 300],
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              color: '#86acee'
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#86acee' },
                { offset: 1, color: '#ffffff' }
              ])
            }
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  .el-icon-more {
    cursor: pointer;
  }
}
.chart {
  width: 100%;
  height: 70px;
}
.desc {
  margin-top: 10px;
  .number {
    font-size: 20px;
    color: #333;
    margin-right: 10%;
  }
  .small-number {
    color: #a5a6ae;
  }
}
.dashboard-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
